<template>
  <div class="search">
    <a-tabs @tabClick="handleTabClick" :defaultActiveKey="current" v-model="current">
      <a-tab-pane tab="基本信息" key="form1">
        <shop-info ref="form1" v-if="current=='form1'"></shop-info>
      </a-tab-pane>
      <a-tab-pane tab="店铺简介" key="form2">
        <shop-desc ref="form2" v-if="current=='form2'"></shop-desc>
      </a-tab-pane>
      <a-tab-pane tab="店铺照片" key="form3">
        <shop-images ref="form3" v-if="current=='form3'"></shop-images>
      </a-tab-pane>
      <a-tab-pane tab="银行账户" key="form4">
        <bank-info ref="form4" v-if="current=='form4'"></bank-info>
      </a-tab-pane>
      <a-tab-pane tab="修改密码" key="form5">
        <password ref="form5" v-if="current=='form5'"></password>
      </a-tab-pane>
    </a-tabs>

  </div>
</template>
<script>
  import ShopInfo from './ShopInfo'
  import ShopDesc from './ShopDesc'
  import ShopImages from './ShopImages'
  import Password from './Password'
  import BankInfo from './BankInfo'

  export default {
    name: 'ShopSetting',
    props: {},
    data() {
      return {
        drawerVisible: false,
        isEdit: false,
        title: '',
        current: 'form1',
        formData: {},
        forms: [
          'form1',
          'form2',
          'form3',
          'form4'
        ]
      }
    },
    methods: {
      visibleChange(drawerVisible) {
        this.drawerVisible = drawerVisible
      },
      handleSubmit(callback) {
        this.$refs[this.current].handleSubmit(callback)
      },
      handleTabClick(name) {
        this.current = name
        if (this.current === this.forms[0]) {
          this.title = this.isEdit ? '编辑开户信息' : '添加开户信息'
        }
        this.$nextTick(() => {
          this.$refs[this.current].setData(this.userInfo)
        })
      }
    },
    computed: {
      modalTitle: function() {
        return this.title
      },
      userInfo() {
        return this.$store.getters.userInfo
      }
    },
    created() {
      this.handleTabClick('form1')
    },
    components: { BankInfo, Password, ShopImages, ShopDesc, ShopInfo }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
